<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="shortcut icon" href="./img/0.jpg" type="image/jpg">
    <link rel="stylesheet" href="//at.alicdn.com/t/font_2919685_v665bxckl5k.css">
    <link rel="stylesheet" href="css/main.css">
    <link rel="stylesheet" href="./css/index.css">
    <title>Index</title>
</head>

<body class="">
    <header>
        <nav class="nav-top">
            <div id="logo">
                <a href="./index.html">
                    暗天使
                </a>
            </div>
            <div class="menu">
                <i class="iconfont icon-menu"></i>
            </div>
            <div class="nav">
                <a href="index.html" class="item">首页</a>
                <a href="./list.html" class="item">文章</a>
                <a href="./archives.html" class="item">足迹</a>
                <a href="./links.html" class="item">友链</a>
                <a href="about.html" class="item">关于</a>
            </div>
            <div class="search">
                <a href="#">
                    <i class="iconfont icon-31sousuo"></i>
                    <!-- <img src="./img/icon/搜索_填充.png" alt=""> -->
                </a>
                <div class="search-box ">
                    <div class="quit">
                        <a href="#">
                            关闭
                        </a>
                    </div>
                    <form action="./search.html">
                        <input required type="text" name="q" id="" placeholder="想要找点什么呢？">
                        <input type="submit" value="搜索">
                    </form>
                </div>
            </div>
        </nav>
        <div class="container-flex">
            <div class="content">
                <div class="logo">
                    <a href="login.html">
                        <img src="./img/logo.jpg" alt="">
                    </a>
                </div>

                <div class="info">
                    <div class="quote">
                        Lorem ipsum dolor sit amet consectetur adipisicing elit. sectetur adipisicing
                    </div>
                    <div class="social">
                        <a href="#" class="item">
                            <img src="./img/icon/QQ-circle-fill.png" alt="">
                        </a>

                        <a href="#" class="item">
                            <img src="./img/icon/微信.png" alt="">
                        </a>

                        <a href="#" class="item">
                            <img src="./img/icon/bilibili-fill.png" alt="">
                        </a>

                        <a href="#" class="item">
                            <img src="./img/icon/youtube.png" alt="">
                        </a>
                    </div>
                </div>
            </div>
        </div>
        <div class="center-video">
            <div class="video-btn"> </div>
            <video loop src="./video/bb.mp4"></video>
        </div>
    </header>
    <main class="container">
        <div class="focus">
            <div class="title">焦点内容</div>
            <div class="focus-list">
                <div class="focus-item">
                    <a href="./article.html">
                        <div class="focus-bg" style="background-image:url(./img/a.jpg)"></div>
                        <div class="focus-title">22223333333333</div>
                        <div class="focus-desc">Lorem ipsum dolor sit, amet consectetur adipisicing</div>
                    </a>
                </div>

                <div class="focus-item">
                    <a href="#">
                        <div class="focus-bg" style="background-image:url(./img/b.jpg)"></div>
                        <div class="focus-title">22223333333333</div>
                        <div class="focus-desc">Lorem ipsum dolor sit, amet consectetur adipisicing</div>
                    </a>
                </div>

                <div class="focus-item">
                    <a href="#">
                        <div class="focus-bg" style="background-image:url(./img/c.jpg)"></div>
                        <div class="focus-title">22223333333333</div>
                        <div class="focus-desc">Lorem ipsum dolor sit, amet consectetur adipisicing</div>
                    </a>
                </div>

            </div>
        </div>
        <div class="post">
            <div class="title">最新发布</div>
            <div class="post-list">
                <div class="post-item">
                    <div class="picture">
                        <a href="#" style="background-image: url(./img/img1.jpg);"></a>
                    </div>
                    <div class="text">
                        <div class="post-title">
                            <a href="#">
                                Lorem ipsum dolor 
                            </a>
                        </div>
                        <div class="post-desc">
                            Loillo corrupti culpa quas officia ratione expedita eum consectetur.
                        </div>
                        <div class="post-info">
                            <span>11月8日</span> -
                            <span>2000观看</span> -
                            <span>100评论</span>
                            <a href="#"></a>
                        </div>
                    </div>
                </div>

                <div class="post-item right">
                    <div class="picture">
                        <a href="#" style="background-image: url(./img/img1.jpg);"></a>
                    </div>
                    <div class="text">
                        <div class="post-title">
                            <a href="#">
                                Lorem ipsum dolor 
                            </a>
                        </div>
                        <div class="post-desc">
                            Loillo corrupti culpa quas officia ratione expedita eum consectetur.
                        </div>
                        <div class="post-info">
                            <span>11月8日</span> -
                            <span>2000观看</span> -
                            <span>100评论</span>
                            <a href="#"></a>
                        </div>
                    </div>
                </div>
                <div class="post-item">
                    <div class="picture">
                        <a href="#" style="background-image: url(./img/img1.jpg);"></a>
                    </div>
                    <div class="text">
                        <div class="post-title">
                            <a href="#">
                                Lorem ipsum dolor 
                            </a>
                        </div>
                        <div class="post-desc">
                            Loillo corrupti culpa quas officia ratione expedita eum consectetur.
                        </div>
                        <div class="post-info">
                            <span>11月8日</span> -
                            <span>2000观看</span> -
                            <span>100评论</span>
                            <a href="#"></a>
                        </div>
                    </div>
                </div>

                <div class="post-item right">
                    <div class="picture">
                        <a href="#" style="background-image: url(./img/d.jpg);"></a>
                    </div>
                    <div class="text">
                        <div class="post-title">
                            <a href="#">
                                Lorem ipsum dolor sit amet consectetur a
                            </a>
                        </div>
                        <div class="post-desc">
                            Loillo corrupti culpa quas officia ratione expedita eum consectetur.
                            Loillo corrupti culpa quas officia ratione expedita eum consectetur.
                        </div>
                        <div class="post-info">
                            2021年11月8日 - 2000观看 - 100评论
                            <a href="#"></a>
                        </div>
                    </div>
                </div>

                <div class="post-item">
                    <div class="picture">
                        <a href="#" style="background-image: url(./img/a.jpg);"></a>
                    </div>
                    <div class="text">
                        <div class="post-title">
                            <a href="#">
                                Lorem ipsum dolor sit amet consectetur a
                            </a>
                        </div>
                        <div class="post-desc">
                            Loillo corrupti culpa quas officia ratione expedita eum consectetur.
                            Loillo corrupti culpa quas officia ratione expedita eum consectetur.
                        </div>
                        <div class="post-info">
                            2021年11月8日 - 2000观看 - 100评论
                            <a href="#"></a>
                        </div>
                    </div>
                </div>

                <div class="post-item right">
                    <div class="picture">
                        <a href="#" style="background-image: url(./img/bg1.jpg);"></a>
                    </div>
                    <div class="text">
                        <div class="post-title">
                            <a href="#">
                                Lorem ipsum dolor sit amet consectetur a
                            </a>
                        </div>
                        <div class="post-desc">
                            Loillo corrupti culpa quas officia ratione expedita eum consectetur.
                            Loillo corrupti culpa quas officia ratione expedita eum consectetur.
                        </div>
                        <div class="post-info">
                            2021年11月8日 - 2000观看 - 100评论
                            <a href="#"></a>
                        </div>
                    </div>
                </div>
            </div>
            <div class="previous">
                <a href="#" class="btn">Previous</a>
            </div>
        </div>
        <footer>
            footer Lorem ipsum, dolor sit amet consectetur adipisicing elit. Libero, distinctio commodi? Voluptatem
            asperiores dicta, excepturi corporis r molestiae iste veniam tempore sint odio,
            <br>
            corrupti ipsa. Harum, inventore.
        </footer>

        <div id="cd-top">
            <img src="./img/f.png" alt="">
        </div>
        <div id="theme">
            <div class="text">
                select theme
            </div>

            <div class="theme-box">
                <a class="item" href="#" data-theme="default">default</a>
                <a class="item" href="#" data-theme="dark">dark</a>
                <a class="item" href="#" data-theme="bronya">bronya</a>
            </div>
        </div>
    </main>
    <div id="music">
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/aplayer/dist/APlayer.min.css">
        <script src="https://cdn.jsdelivr.net/npm/aplayer/dist/APlayer.min.js"></script>
        <script src="https://cdn.jsdelivr.net/npm/meting@2.0.1/dist/Meting.min.js"></script>
        <div id="play">
            <meting-js server="netease" mini="true" theme="#66ccff" type="playlist" id="4869028526" fixed="true"
                autoplay="false" loop="all" order="random" preload="auto" list-folded="ture" list-max-height="340px"
                lrc-type="1" mutex="true">
            </meting-js>
        </div>
    </div>
    <script src="js/main.js"></script>
    <script>
        function videoPlay() {
            let v = document.querySelector('.center-video video')
            let b = document.querySelector('.center-video .video-btn')
            let c = document.querySelector('header .content')

            b.addEventListener('click', function () {
                if (v.paused === true) {
                    c.classList.add('move')
                    v.style.display = 'block'
                    v.play()
                    b.style.backgroundImage = 'url(./img/icon/暂停.png)'
                } else {
                    c.classList.remove('move')
                    v.pause()
                    b.style.backgroundImage = 'url(./img/icon/播放.png)'
                }
            })
        }
        videoPlay()
    </script>
    <script>
        let theme = document.getElementById('theme')
        let box = theme.querySelector('.theme-box')

        setInterval(function () {
            if (document.documentElement.scrollTop > 0) {
                theme.classList.add('show')
            } else {
                theme.classList.remove('show')
            }
        }, 100)

        theme.addEventListener('click', function () {
            box.classList.toggle('show')
        })

        document.addEventListener("scroll", throttle(function () {
            box.classList.remove('show')
        }, 200))


        let themeList = document.querySelectorAll('.theme-box .item')
        for (let i = 0; i < themeList.length; i++) {
            themeList[i].addEventListener('click', function (e) {
                e.preventDefault()
                document.body.className = "theme-" + themeList[i].dataset.theme
            })
        }
    </script>
    <script>
        let play = document.querySelector('#play')
        setInterval(function () {
            if (document.documentElement.scrollTop > 0) {
                play.hidden = false
            } else {
                play.hidden = true
            }
        }, 100)
    </script>
</body>

</html>